<template>
  <div id="home">
    <!-- tab栏区域 -->
    <div class="b-wrap tab_main">
      <!-- tab栏左边区域 -->
      <div class="tab_left">
        <ul>
          <li class="tab_left_item" v-for="(item, i) in tabsLeftList" :key="i">
            <a href="#" @click="promptMessage">
              <div class="tab_left_item2">
                <div class="round">
                  <i class="iconfont" :class="item.class" :style="item"></i>
                </div>
                <span>{{ item.name }}</span>
              </div>
            </a>
          </li>
        </ul>
      </div>

      <!-- tab栏中间区域 -->
      <div class="tab_center">
        <span v-for="(item, i) in tabsList" :key="i" class="tab_center_item">
          <a href="#" @click="promptMessage">
            <span>{{ item.text }}</span>
            <!-- <span><img src="../assets/img/999+.png" alt="" /></span> -->
          </a>
        </span>
      </div>

      <!-- tab栏右边区域 -->
      <div class="tab_right">
        <ul>
          <li class="tab_right_item" v-for="(item, i) in tabsRightList" :key="i">
            <a href="#" @click="promptMessage">
              <i class="iconfont" :class="item.class" :style="item"></i>
              <span class="tab_right_text">{{ item.name }}</span>
            </a>
          </li>
        </ul>
      </div>
    </div>

    <!-- 第一部分内容 -->
    <div class="b-wrap first-content">
      <div class="space-between">
        <!-- 轮播图 arrow="never" -->
        <el-carousel trigger="click" :autoplay="true">
          <el-carousel-item v-for="(item, i) in swiperList" :key="i">
            <div @click="routerJump(`/o/video/VideoDetail/` + item.id)">
              <a :href="'/o/video/VideoDetail/' + item.id">
                <img class="swiper_img" v-lazy="downloadUrl + item.videoCover" />
                <div class="swiper_title">{{ item.videoTitle }}</div>
              </a>
            </div>
          </el-carousel-item>
        </el-carousel>

        <!-- 轮播图右边内容 -->
        <div class="swiper_right_content">
          <div v-for="(item, i) in swiperList_r" :key="i" class="s_r_c_item">
            <div @click="routerJump(`/o/video/VideoDetail/` + item.id)">
              <a :href="'/o/video/VideoDetail/' + item.id">
                <img v-lazy="downloadUrl + item.videoCover" />
                <div class="s_r_c_title">{{ item.videoTitle }}</div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 各种内容 -->
    <div class="b-wrap">
      <!-- 动画 -->
      <div class="various-content">
        <!-- 卡片区域 -->
        <card :maindata="animationList" :mdname="'animation'" class="various-c-card"></card>
        <!-- 排行榜 -->
        <top-list :maindata="animationList" class="various-c-toplist"></top-list>
      </div>

      <!-- 音乐 -->
      <div class="various-content">
        <!-- 卡片区域 -->
        <card :maindata="musicList" :mdname="'music'" class="various-c-card"></card>
        <!-- 排行榜 -->
        <top-list :maindata="musicList" class="various-c-toplist"></top-list>
      </div>

      <!-- 游戏 -->
      <div class="various-content">
        <!-- 卡片区域 -->
        <card :maindata="gameList" :mdname="'game'" class="various-c-card"></card>
        <!-- 排行榜 -->
        <top-list :maindata="gameList" class="various-c-toplist"></top-list>
      </div>

      <!-- 舞蹈 -->
      <div class="various-content">
        <!-- 卡片区域 -->
        <card :maindata="danceList" :mdname="'dance'" class="various-c-card"></card>
        <!-- 排行榜 -->
        <top-list :maindata="danceList" class="various-c-toplist"></top-list>
      </div>

      <!-- 时尚 -->
      <div class="various-content">
        <!-- 卡片区域 -->
        <card :maindata="fashionList" :mdname="'fashion'" class="various-c-card"></card>
        <!-- 排行榜 -->
        <top-list :maindata="fashionList" class="various-c-toplist"></top-list>
      </div>
    </div>

    <!-- <PlaneWar /> -->
    <!-- 保卫大司马广告 -->
    <!-- <Advertising />
    <AdvertisingRadish /> -->
  </div>
</template>

<script>
import { homeListVideo } from "@/api/video/video";

import axios from "axios";

// 组件
import Card from "./card/Card";
import TopList from "./toplist/TopList";
import PlaneWar from "@/components/planeWar"
import Advertising from "@/components/advertising"
import AdvertisingRadish from "@/components/advertising-radish"

export default {
  name: "Home",
  components: {
    Card,
    TopList,
    PlaneWar,
    Advertising,
    AdvertisingRadish,
  },
  data() {
    return {
      tabsLeftList: [
        // { id: 1, name: "首页", background: "#ff5c7c", class: "icon-shouye" },
        {
          id: 2,
          name: "动态",
          background: "#73c9e5",
          class: "icon-iconfontdongtai",
        },
        { id: 3, name: "热门", background: "#ff716d", class: "icon-remen" },
      ],
      tabsList: [{ "id": 0, "text": "动画" }, { "id": 1, "text": "番剧" }, { "id": 2, "text": "国创" },
      { "id": 3, "text": "鬼畜" }, { "id": 4, "text": "舞蹈" }, { "id": 5, "text": "娱乐" },
      { "id": 6, "text": "科技" }, { "id": 7, "text": "美食" }, { "id": 8, "text": "知识" },
      { "id": 9, "text": "电影" }, { "id": 10, "text": "电视剧" }, { "id": 11, "text": "游戏" },
      { "id": 12, "text": "音乐" }, { "id": 13, "text": "生活" },
      { "id": 15, "text": "虚拟up" }, { "id": 16, "text": "运动" },],
      tabsRightList: [
        { name: "专栏", color: "#54e2e2", class: "icon-zhuanlan" },
        { name: "活动", color: "#f39800", class: "icon-huodong" },
        { name: "小黑屋", color: "#ffd043", class: "icon-tianping" },
        { name: "直播", color: "#23ade5", class: "icon-15" },
        { name: "课堂", color: "#ffea85", class: "icon-jingpinketang" },
        { name: "音乐PLUS", color: "#3da9d3", class: "icon-yinle" },
      ],
      // 页面数据
      mainDataList: [],
      // 轮播图数据
      swiperList: [],
      // 轮播图右边数据
      swiperList_r: [],
      // 动画模块数据
      animationList: [],
      // 音乐模块数据
      musicList: [],
      // 游戏模块数据
      gameList: [],
      // 舞蹈模块数据
      danceList: [],
      // 时尚模块数据
      fashionList: [],
      // 查询传参对象
      videoPartition: "",
      downloadUrl: process.env.VUE_APP_DOWNLOAD_URL,
    };
  },
  created() {
    // 获取tab栏数据
    // this.getTabsList();

    // 获取所有的数据
    this.getMainDataList();
  },
  watch: {
    // animationList(val) {
    //   this.$forceUpdate();
    // },
  },
  mounted() {
    // 事件总线 接收换一换发出的事件
    this.$bus.$on("changeList", (mdnameItem) => {
      if (mdnameItem === "animation") {
        this.getAnimationList(mdnameItem);
      } else if (mdnameItem === "music") {
        this.getMusicList(mdnameItem);
      } else if (mdnameItem === "game") {
        this.getGameList(mdnameItem);
      } else if (mdnameItem === "dance") {
        this.getDanceList(mdnameItem);
      } else if (mdnameItem === "fashion") {
        this.getFashionList(mdnameItem);
      } else {
        this.$message.error("换一换，数据更新失败");
      }
    });
  },
  methods: {
    // 获取tabs栏的数据
    // async getTabsList() {
    //   const { data: res } = await axios.get(
    //     "https://mockapi.eolinker.com/7b7NMB9c75d613bc39c8f16e4e03a3d4a8f951750079dc5/navList"
    //   );
    //   if (res.code !== 0) {
    //     return;
    //   }
    //   console.log(res.data.navList);
    //   this.tabsList = res.data.navList;
    // },

    // 获取所有的数据
    async getMainDataList() {
      const { data: res } = await homeListVideo(this.videoPartition);
      console.log(res)
      if (res.code !== 0) {
        return;
      }
      // 保存所有数据
      this.mainDataList = res;

      // 获取轮播图和他旁边内容的数据
      for (let i = 0; i < 4; i++) {
        this.swiperList.push(res.data.dougaList[i]);
      }
      for (let i = 4; i < 10; i++) {
        this.swiperList_r.push(res.data.dougaList[i]);
      }

      // 获取动画数据
      for (let i in res.data.animationList) {
        this.animationList.push(res.data.animationList[i]);
      }
      console.log(this.animationList);

      // 获取音乐数据
      for (let i in res.data.musicList) {
        this.musicList.push(res.data.musicList[i]);
      }

      // 获取游戏数据
      for (let i in res.data.gameList) {
        this.gameList.push(res.data.gameList[i]);
      }

      // 获取舞蹈数据
      for (let i in res.data.danceList) {
        this.danceList.push(res.data.danceList[i]);
      }

      // 获取时尚数据
      for (let i in res.data.fashionList) {
        this.fashionList.push(res.data.fashionList[i]);
      }
    },

    // 获取动画数据
    async getAnimationList(mdnameItem) {
      this.videoPartition = mdnameItem;
      const { data: res } = await homeListVideo(this.videoPartition);
      if (res.code !== 0) {
        return;
      }
      // 清空数组
      this.animationList.splice(0, this.animationList.length);
      for (let i in res.data.animationList) {
        this.animationList.push(res.data.animationList[i]);
      }
    },

    // 获取音乐数据
    async getMusicList(mdnameItem) {
      this.videoPartition = mdnameItem;
      const { data: res } = await homeListVideo(this.videoPartition);
      if (res.code !== 0) {
        return;
      }
      console.log(res.data.musicList);
      // 清空数组
      this.musicList.splice(0, this.musicList.length);
      for (let i in res.data.musicList) {
        this.musicList.push(res.data.musicList[i]);
      }
    },

    // 获取游戏数据
    async getGameList(mdnameItem) {
      this.videoPartition = mdnameItem;
      const { data: res } = await homeListVideo(this.videoPartition);
      if (res.code !== 0) {
        return;
      }
      // 清空数组
      this.gameList.splice(0, this.gameList.length);
      for (let i in res.data.gameList) {
        this.gameList.push(res.data.gameList[i]);
      }
    },

    // 获取舞蹈数据
    async getDanceList(mdnameItem) {
      this.videoPartition = mdnameItem;
      const { data: res } = await homeListVideo(this.videoPartition);
      if (res.code !== 0) {
        return;
      }
      // 清空数组
      this.danceList.splice(0, this.danceList.length);
      for (let i in res.data.danceList) {
        this.danceList.push(res.data.danceList[i]);
      }
    },

    // 获取时尚数据
    async getFashionList(mdnameItem) {
      this.videoPartition = mdnameItem;
      const { data: res } = await homeListVideo(this.videoPartition);
      if (res.code !== 0) {
        return;
      }
      // 清空数组
      this.fashionList.splice(0, this.fashionList.length);
      for (let i in res.data.fashionList) {
        this.fashionList.push(res.data.fashionList[i]);
      }
    },

    // 点击跳转路径
    routerJump(id) {
      this.$router.push(`${id}`);
    },

    // 提示信息
    promptMessage() {
      this.$message.warning("此页面还没有做好哦!");
    },
  },
};
</script>

<style>
.tab_main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 100px;
  padding: 10px 0;
}

/* tab栏左边区域 */
.tab_left {
  width: 100px;
}

.tab_left_item {
  width: 50px;
  height: 68px;
  text-align: center;
  font-size: 14px;
}

.tab_left_item2 {
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.round {
  display: inline-block;
  width: 40px;
  height: 36px;
  line-height: 40px;
}

.round i {
  color: #fff;
  border-radius: 50%;
  padding: 5px;
  font-size: 20px;
}

/* tab栏中间区域 */
.tab_center {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  text-align: center;
  border-left: 1px solid rgba(105, 105, 105, 0.2);
  border-right: 1px solid rgba(105, 105, 105, 0.2);
}

.tab_center_item {
  /* position: relative; */
  display: inline-block;
  width: 10%;
  font-size: 14px;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 2%;
  /* margin-right: 3px; */
  background-color: rgb(240, 240, 240);
  border-radius: 3px;
}

.tab_center_item span {
  margin-right: 2px;
}

.tab_center_item span img {
  /* position: absolute; 
  top: 5px;
  left: 29px;*/
  width: 28px;
}

/* tab栏右边区域 */
.tab_right {
  margin-left: 15px;
  width: 220px;
}

.tab_right ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding-left: 0;
}

.tab_right_item {
  font-size: 14px;
  margin-right: 6px;
  margin-top: 5px;
}

.tab_right_item i {
  font-size: 18px;
  margin-right: 5px;
}

/* 第一内容 */
.first-content {
  height: 18vw;
  min-height: 240px;
  max-height: 300px;
}

/* 轮播图 */
.space-between {
  display: flex;
  justify-content: space-between;
  height: 100%;
}

.el-carousel {
  width: 36vw;
  min-width: 400px;
  max-width: 500px;
  height: 100% !important;
  border-radius: 8px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}

.el-carousel__container {
  height: 100% !important;
}

.el-carousel__item {
  /* position: relative; */
  width: 100%;
  height: 100% !important;
}

.swiper_img {
  display: inline-block;
  width: 100%;
}

.swiper_title {
  display: inline-block;
  max-width: 95%;
  position: absolute;
  left: 15px;
  bottom: 20px;
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  /* 一行显示 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

/* 轮播图右边内容 */
.swiper_right_content {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
  margin-left: 10px;
}

.s_r_c_item {
  position: relative;
  width: 32%;
  height: 48%;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}

.s_r_c_item img {
  width: 100%;
  display: block;
}

.s_r_c_title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  line-height: 23px;
  color: #fff;
  font-size: 14px;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(119, 119, 119, 0.1));
  padding: 2px 5px 5px;
  /* 一行显示 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.title_two_show {
  -webkit-line-clamp: 2;
}

.b-wrap {}

/* 各种内容区域 */
.various-content {
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
}

.various-c-card {
  width: 75%;
  height: 420px;
  /* height: cal(20% + 80px); */
}

.various-c-toplist {
  flex: 1;
}
</style>
